<template>
  <div class="settings">
    <h1 class="page-title">系统设置</h1>

    <el-card shadow="never">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="基本设置" name="basic">
          <el-form :model="basicForm" label-width="120px" style="max-width: 600px;">
            <el-form-item label="网站名称">
              <el-input v-model="basicForm.siteName" />
            </el-form-item>
            <el-form-item label="网站Logo">
              <el-input v-model="basicForm.siteLogo" placeholder="请输入Logo URL" />
            </el-form-item>
            <el-form-item label="网站描述">
              <el-input v-model="basicForm.siteDesc" type="textarea" :rows="3" />
            </el-form-item>
            <el-form-item label="联系邮箱">
              <el-input v-model="basicForm.contactEmail" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSaveBasic">保存</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="API设置" name="api">
          <el-form :model="apiForm" label-width="120px" style="max-width: 600px;">
            <el-form-item label="API地址">
              <el-input v-model="apiForm.baseURL" placeholder="https://your-api-url.com" />
            </el-form-item>
            <el-form-item label="超时时间(ms)">
              <el-input-number v-model="apiForm.timeout" :min="1000" :step="1000" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSaveApi">保存</el-button>
              <el-button @click="handleTestApi">测试连接</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="上传设置" name="upload">
          <el-form :model="uploadForm" label-width="120px" style="max-width: 600px;">
            <el-form-item label="最大文件大小">
              <el-input-number v-model="uploadForm.maxSize" :min="1" :max="100" />
              <span style="margin-left: 10px;">MB</span>
            </el-form-item>
            <el-form-item label="允许的格式">
              <el-checkbox-group v-model="uploadForm.allowedTypes">
                <el-checkbox value="image/jpeg">JPEG</el-checkbox>
                <el-checkbox value="image/png">PNG</el-checkbox>
                <el-checkbox value="image/gif">GIF</el-checkbox>
                <el-checkbox value="image/webp">WebP</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSaveUpload">保存</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="系统信息" name="info">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="系统版本">1.0.0</el-descriptions-item>
            <el-descriptions-item label="Vue版本">3.5.18</el-descriptions-item>
            <el-descriptions-item label="Element Plus">2.11.2</el-descriptions-item>
            <el-descriptions-item label="构建时间">{{ buildTime }}</el-descriptions-item>
            <el-descriptions-item label="浏览器">{{ browserInfo }}</el-descriptions-item>
            <el-descriptions-item label="操作系统">{{ osInfo }}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'

const activeTab = ref('basic')

const basicForm = reactive({
  siteName: 'fang旅管理系统',
  siteLogo: '/logo.svg',
  siteDesc: '旅游内容管理后台',
  contactEmail: 'admin@fanglv.com'
})

const apiForm = reactive({
  baseURL: 'https://fc-mp-77def827-a81a-4125-8389-94d01ea341a3.next.bspapp.com/api',
  timeout: 5000
})

const uploadForm = reactive({
  maxSize: 10,
  allowedTypes: ['image/jpeg', 'image/png', 'image/webp']
})

const buildTime = computed(() => {
  return new Date().toLocaleString('zh-CN')
})

const browserInfo = computed(() => {
  return navigator.userAgent.split(' ').slice(-2).join(' ')
})

const osInfo = computed(() => {
  const platform = navigator.platform
  return platform
})

const handleSaveBasic = () => {
  ElMessage.success('基本设置保存成功')
}

const handleSaveApi = () => {
  ElMessage.success('API设置保存成功')
}

const handleTestApi = async () => {
  try {
    ElMessage.info('正在测试API连接...')
    // 这里可以添加实际的测试逻辑
    setTimeout(() => {
      ElMessage.success('API连接测试成功')
    }, 1000)
  } catch (error) {
    ElMessage.error('API连接测试失败')
  }
}

const handleSaveUpload = () => {
  ElMessage.success('上传设置保存成功')
}
</script>

<style scoped lang="scss">
.settings {
  .page-title {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
  }
}
</style>

